<template>
  <div :class="!showEmployeeSecondMenu ? 'nav-container' : 'nav-container-hidden'">
    <aside class="nav-top">
      <div class="nav-top-title">
        <div class="logo-section">
          <img src="@/assets/HRResources/login/newlogo.svg" class="logo1" alt="" srcset="" />
          <a-divider type="vertical" style="height: 40px; background-color: #fff" />
          <div class="title">CONFIGURATION</div>
        </div>
        <div class="tool-section">
          <div class="user-section">
            <a-dropdown>
              <div class="user-content" @click.prevent>
                <span class="username">{{ state?.getUserInfo?.username }}</span>
                <img class="header-img" src="../../assets/png/logo.png" alt="" />
                <i class="fa fa-angle-down iconStyle" />
              </div>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="btnHandler('switchTopic')">
                    <i class="fa fa-palette" />
                    <span style="font-size: 12px;margin-left: 4px;margin-right: 4px;">{{ $t("切换主题") }}</span>
                  </a-menu-item>
                  <a-menu-item @click="btnHandler('english')">
                    <svg-icon name="en" />
                    <span style="font-size: 12px;margin-left: 4px;margin-right: 4px;">{{ $t("EN") }}</span>
                  </a-menu-item>
                  <a-menu-item @click="btnHandler('chinese')" style="display: flex;align-items: center;">
                    <svg-icon name="zn" style="line-height: 36px;" />
                    <span style="font-size: 12px;margin-left: 4px;margin-right: 4px;">{{ $t("ZN") }}</span>
                  </a-menu-item>
                  <a-menu-item @click="btnHandler('arabic')">
                    <svg-icon name="ar" />
                    <span style="font-size: 12px;margin-left: 4px;margin-right: 4px;">{{ $t("عربي") }}</span>
                  </a-menu-item>
                  <a-menu-item @click="btnHandler('signOut')">
                    <span style="font-size: 12px;">{{ $t("signOut") }}</span>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </div>
      <div class="breadcrumb-section">
        <template v-for="(item, index) in state.menuList" :key="item.name">
          <!-- item.meta.isMenu判断是否展示一级菜单 -->
          <div v-if="item.meta.isMenu && item.meta.isVisible && item.name == 'personalCenterT' && employeeId" @click="menuItemAction(item)" class="breadcrumb-item"
            :class="{ 'breadcrumb-item-active': state.menuFirstChoose == item.name }">
            <svg-icon :name="item.meta.icon" class="item-icon" />

            <span class="breadcrumb-title" :class="{ 'breadcrumb-active': state.menuFirstChoose == item.name }">
              {{ isCn ? item.meta.nameZh : isArabic ? item.meta.nameAr : item.meta.nameEn }}
            </span>
          </div>
          <div v-if="item.meta.isMenu && item.name != 'personalCenterT'" @click="menuItemAction(item)" class="breadcrumb-item"
            :class="{ 'breadcrumb-item-active': state.menuFirstChoose == item.name }">
            <svg-icon :name="item.meta.icon" class="item-icon" />

            <span class="breadcrumb-title" :class="{ 'breadcrumb-active': state.menuFirstChoose == item.name }">
              {{ isCn ? item.meta.nameZh : isArabic ? item.meta.nameAr : item.meta.nameEn }}
            </span>
          </div>
        </template>
      </div>
    </aside>
    <div class="app-content" :style="{
      left:
        (state.crumbList.length > 0 && menuHook.subMenuList?.length === 1 ||
          submenuWhiteList.indexOf(state.crumbList[0]?.name) < 0) ||
          state.isArabic
          ? '0'
          : '84px',
      right:
        !(
          state.crumbList.length > 0 && menuHook.subMenuList.length !== 1 &&
          submenuWhiteList.indexOf(state.crumbList[0].name) < 0
        ) && state.isArabic
          ? '84px'
          : '0',
    }">
      <router-view></router-view>
    </div>

    <Theme ref="themeRef" />
  </div>
</template>

<script lang="ts" setup>
import screenfull from "screenfull";
import { Local, Session } from "@/utils/storage";
import hooks, { useLanguage } from "@/hooks/index";
const { isEn, isCn, isArabic } = useLanguage();
import Theme from "@/components/theme/theme.vue"
import hook from "@/hooks";
import menuHook from "@/hooks/menuHook/menuHook";
import { CommonEnum } from "@/utils/common/enums/commonEnum";
import { UseLoginOutApi } from "@/api/login/login";
import { getToken } from "@/utils/auth";
import { getLanguageList } from "@/utils/common/common";

getLanguageList(true, false);
const router = useRouter();
const store = useStore();
const { proxy } = getCurrentInstance() as any;
let state: any = reactive({
  isArabic: isArabic.value,
  crumbList: computed(() => store.getters.getCrumbList),
  menuList: computed(() => store.getters.getMenu),
  currentMenu: computed(() => store.getters.getCurrentMenu),
  menuFirstChoose: computed(() => hook.menuHook.menuFirstChoose),
  getUserInfo: computed(() => store.getters.getUserInfo),
});
const initWhiteList = [
  "staff",
  "organization",
  "setting",
  "Recruitment",
  "recruitment",
];
const submenuWhiteList = (state.menuList && state.menuList.filter((o: any) => o.redirect).map((v: any) => v.name)) ?? initWhiteList;//二级菜单可展示在中间
const showEmployeeSecondMenu = computed(() => {
  return hooks.menuHook.showEmployeeSecondMenu
})
const themeRef = ref(null)
const btnHandler = (type: string) => {
  // consolelog("点击类型是：", type);
  switch (type) {
    case "toProfile":
      router.push("/profile");
      break;
    case "chinese":
      Local.set("localLanguage", "zh-CN");
      proxy.$i18n.locale = "zh-CN";
      // proxy.$i18n.locale = Local.get("localLanguage");
      break;
    case "english":
      Local.set("localLanguage", "en-US");
      // proxy.$i18n.locale = Local.get("localLanguage");
      proxy.$i18n.locale = "en-US";
      break;
    case "arabic":
      Local.set("localLanguage", "arabic");
      // proxy.$i18n.locale = Local.get("localLanguage");
      proxy.$i18n.locale = "arabic";
      break;
    case "signOut":
      // window.localStorage.clear();

      UseLoginOutApi().then((r: any) => {
        removeCookie(getToken(), { path: "/" });
        Session.remove("userInfo");
        Session.remove("currentPath");
        Local.set(CommonEnum.setRedisLocalLanguage, false)
        store.dispatch("CLEAR_ALL_ROUTES");
        router.push("/login");
      })
      break;
    case "full":
      screenfull.isEnabled && screenfull.toggle();
      break;
    case "switchTopic":
      themeRef.value && themeRef.value.showModal()
      break;
  }
};
// 为阿拉伯语时将logo 布局置右
watch(() => [state.currentPath, proxy.$i18n.locale], ([v, newVal]) => {
  store.dispatch("menuSetting/SET_SHOWEMP_STATE", false); //清除页面二级菜单
  if (newVal == "arabic") {
    state.isArabic = true;
  } else {
    state.isArabic = false;
  }
}, { deep: true });
// 监听本地化当前语言

const userData: any = computed(() => Session.get("userInfo"));
const removeCookie = (key: string, { path = "/" }) => {
  const date = "Thu, 01 Jan 1970 00:00:00 GMT";
  const cookie = `${key}=;path=${path};expires=${date};`;
  document.cookie = cookie;
};
const menuItemAction = (menu: any) => {
  //目前左边导航选中的active
  store.commit("SET_CURRENT_MENU", menu.name);
  // if (menu.name.includes('personalCenter')) {
  hooks.menuHook.showEmployeeSecondMenu = false
  // }
  hook.menuHook.menuFirstChoose = menu.name
  router.push({ name: menu.name });
};
const employeeId = computed(() => {
  return store.getters.getUserInfo?.employeeId;
});
</script>

<style scoped lang="scss">
@import "./css/nav-container.scss";
@import "./css/nav-container-hidden.scss";

::v-deep {
  .ant-dropdown-menu-title-content {
    display: flex;
    align-items: center;
  }
}
</style>
